import React, {Component} from "react";
import './BasicLayout.css'
import {Helmet} from 'react-helmet';
import {Avatar, Button, Icon, Layout, Menu} from "antd";
import HttpUtils from "../utils/HttpUtils";
import AdminMenu from "../components/admin/menu/menu";
import {inject, observer} from "mobx-react";
import urlTable from "../components/path/urlTable"
import pathToKey from "../components/path/pathTokey"

const {Header, Sider, Content, Footer} = Layout;


export default @inject('store') @observer
class BasicLayout extends Component {
    constructor(props) {
        super(props);

        this.state = {
            user: null,
        };

        if (!this.props.store.user.user) {
            this._userInfo();
        }


        this.props.store.page.setMenuSelected(pathToKey[props.location.pathname])
    }

    handleRoute(key) {
        if (urlTable[key]) {
            this.props.history.push(urlTable[key]);
        }
    }

    _userInfo() {
        window.$message.loading("加载用户信息...");
        window.$http.postForm("/user/info").then(res => {
            window.$message.destroy();
            if (res.status === 10000) {
                console.log(res);
                this.props.store.user.setUser(res.user);

                this.setState({user: res.user});
            } else {
                window.$message.warn(res.message);
                this.props.history.push("/");
            }
        }).catch(err => {
            window.$message.destroy();
            window.$message.error(err.message);
        })
    }

    _logout() {
        HttpUtils.postForm('/logout', {}).then(res => {
            if (res.status === 10000) {
                this.props.store.user.user = undefined;
                this.props.history.push('/');
            } else {
                window.$message.warn(res.message);
            }
        })
    }

    render() {
        return (
            <Layout style={{height: '100%', minWidth: 1280}}>
                <Helmet>
                    <title>主页</title>
                    {/*<meta name="description" content={BasicLayout}/>*/}
                    <link rel={'shortcut icon'} href='../assets/logo192.png'/>
                </Helmet>
                <Header style={{paddingRight: 20}}>
                    <div
                        style={{float: "left"}}
                    >
                        <img width={35} height={35} src={require('../assets/logo192.png')} alt={'logo192.png'}/>
                    </div>

                    <div style={{float: "right", color: '#c7c7c7'}}>
                        <span
                            className='margin'>{!this.props.store.user.user ? '' : this.props.store.user.user.nickname}</span>
                        {!this.props.store.user.user ? '' :
                            <Avatar className='margin' src={this.props.store.user.user.avatar}/>}
                        <span className='margin'>
                            <Button type={"link"} onClick={() => this._logout()}>
                                注销
                            </Button>
                        </span>
                    </div>
                </Header>
                <Layout
                    style={{height: '100%'}}
                >
                    <Sider
                        width={200}
                        // style={{height:'100%'}}
                    >
                        <Menu
                            theme={"dark"}
                            mode={"inline"}
                            defaultSelectedKeys={'1'}
                            selectedKeys={this.props.store.page.menuSelected}
                            onClick={item => {
                                this.handleRoute(item.key);
                                // console.log('menuSelected', this.props.store.page.menuSelected)
                            }}
                            style={{
                                height: '100%',
                                borderRight: 0,
                                background: '#002a4a',
                            }}>

                            {/*{AdminMenu('3','cloud','概况')}*/}
                            <Menu.Item key={'1'}>
                                <Icon type={'cloud'}/>概况
                            </Menu.Item>

                            {AdminMenu('3', 'dashboard', '机器状态')}
                            {AdminMenu('2', 'team', '用户管理')}
                            {/*{AdminMenu('4', 'cluster', '机器分配')}*/}

                            {AdminMenu('5', 'code', '程序设置')}

                            <Menu.Item key={'6'}>
                                <Icon type={'database'}/>数据查找
                            </Menu.Item>

                            {/*{AdminMenu('7', 'tool', '使用权管理')}*/}

                            <Menu.Item key={'8'}>
                                <Icon type={'user'}/>个人中心
                            </Menu.Item>

                            <Menu.Item key={'9'}>
                                <Icon type={'read'}/>操作说明
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout
                        style={{
                            padding: '14px 10px 0',
                            // height: '100%',
                        }}>
                        <Content
                            style={{
                                background: '#fff',
                                padding: 24,
                                margin: 0,
                                // height: '100%',
                                minHeight: 280,
                            }}>
                            {this.props.children}
                        </Content>
                        <Footer style={{textAlign: "center", padding: 14}}>
                            Moyrn © 2019 - 2020
                        </Footer>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}